
<script setup>
import {ref, computed, onMounted} from 'vue'
import {useRoute} from 'vue-router'
import axios from 'axios'
import {
  Location,
  Iphone,
  Clock,
  Star,
  Document,
  Flag,
  InfoFilled,
  CollectionTag,
  Notebook,
  OfficeBuilding
} from '@element-plus/icons-vue'
import RoomList from '../../components/RoomList.vue'

const route = useRoute()
const shopData = ref({
  shopName: '',
  address: '',
  contact: '',
  description: '',
  imgUrlList: [],
  logoImgUrl: '',
  tagIdList: [],
  avgRating: 0,
  orderNum: 0,
  likes: 0
})
const rooms = ref([])
const allTags = ref([])

// 计算营业时间
const openingHours = computed(() => {
  if (rooms.value.length === 0) return '暂无营业时间'
  const firstRoom = rooms.value[0]
  return `${firstRoom.openingHoursFrom} - ${firstRoom.openingHoursTo}`
})

// 过滤有效标签
const filteredTags = computed(() => {
  return shopData.value.tagIdList
      .map(tagId => allTags.value.find(t => t.id === tagId))
      .filter(t => t)
})

// 加载数据
const loadData = async () => {
  try {
    // 加载标签
    const tagRes = await axios.get(BASE_URL+'/v1/show/tag/select')
    if (tagRes.data.code === 2000) {
      allTags.value = tagRes.data.data
    }

    console.log(allTags.value)
    // 加载店铺详情
    const shopRes = await axios.get(BASE_URL+`/v1/show/shop/select?id=`+route.params.id)
    if (shopRes.data.code === 2000) {
      Object.assign(shopData.value, {
        ...shopRes.data.data[0],
        avgRating: Number(shopRes.data.data[0].avgRating) || 0,
        tagIdList: shopRes.data.data[0].tagIdList || []
      })
    }
    // 加载房间列表
    const roomRes = await axios.get(BASE_URL+'/v1/show/room/select', {
      params: {shopId: route.params.id}
    })
    if (roomRes.data.code === 2000) {
      rooms.value = roomRes.data.data
    }
  } catch (error) {
    console.error('数据加载失败:', error)
  }
}
onMounted(() => {
  loadData()
  console.log(shopData.value)
})
</script>

<style scoped>
.shop-detail-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.shop-header {
  position: relative;
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shop-carousel {
  height: 400px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.carousel-image {
  width: 100%;
  height: 100%;
}

.shop-basic-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  color: white;
  display: flex;
  align-items: flex-end;
  gap: 30px;
}

.logo-wrapper {
  width: 120px;
  height: 120px;
  border: 3px solid white;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.shop-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-placeholder {
  width: 100%;
  height: 100%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
}

.info-main {
  flex: 1;
}

.shop-name {
  margin: 0 0 10px 0;
  font-size: 32px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.shop-stats {
  display: flex;
  gap: 30px;
  font-size: 16px;

  .stat-item {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-icon {
      font-size: 20px;
    }
  }
}

.shop-body {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
}

.info-card {
  border-radius: 12px;

  .info-section {
    margin-bottom: 25px;

    h2 {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #303133;
      font-size: 20px;
      margin: 0 0 15px 0;

      .el-icon {
        color: #409eff;
      }
    }
  }
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  font-size: 14px;
  color: #606266;

  .el-icon {
    font-size: 18px;
    color: #409eff;
  }
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .shop-tag {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 20px;
  }
}

.description {
  line-height: 1.6;
  color: #606266;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.room-list {
  .section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #303133;
    font-size: 24px;
    margin: 0 0 20px 0;
  }
}

.image-error {
  background: #f0f2f5;
  color: #909399;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>


<template>
  <div class="shop-detail-container">
    <!-- 头部信息 -->
    <div class="shop-header">
      <el-carousel
          :interval="5000"
          height="400px"
          class="shop-carousel"
      >
        <el-carousel-item
            v-for="(img, index) in shopData.imgUrlList"
            :key="index"
        >
          <el-image
              :src="img"
              fit="cover"
              class="carousel-image"
          >
            <template #error>
              <div class="image-error">图片加载失败</div>
            </template>
          </el-image>
        </el-carousel-item>
      </el-carousel>

      <div class="shop-basic-info">
        <div class="logo-wrapper">
          <el-image
              :src="shopData.logoImgUrl"
              class="shop-logo"
          >
            <template #error>
              <div class="logo-placeholder">
                {{ shopData.shopName?.substring(0, 2) }}
              </div>
            </template>
          </el-image>
        </div>
        <div class="info-main">
          <h1 class="shop-name">{{ shopData.shopName }}</h1>
          <div class="shop-stats">
            <div class="stat-item">
              <el-icon><Star /></el-icon>
              <span>{{ shopData.avgRating?.toFixed(1) }}分</span>
            </div>
            <div class="stat-item">
              <el-icon><Document /></el-icon>
              <span>月售{{ shopData.orderNum }}单</span>
            </div>
            <div class="stat-item">
              <el-icon><Flag /></el-icon>
              <span>{{ shopData.likes }}点赞</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主体信息区 -->
    <div class="shop-main-info">
      <el-row :gutter="30">
        <!-- 基础信息卡片 -->
        <el-col :xs="24" :md="14">
          <el-card class="info-card">
            <div class="info-grid">
              <el-row :gutter="20">
                <!-- 基础信息 -->
                <el-col :xs="24" :md="14">
                  <div class="info-section">
                    <h2 class="info-title">
                      <el-icon><InfoFilled /></el-icon>
                      基础信息
                    </h2>
                    <div class="info-item">
                      <el-icon><Location /></el-icon>
                      <div class="content">
                        <span class="label">地址: </span>
                        <span class="value">{{ shopData.address }}</span>
                      </div>
                    </div>
                    <div class="info-item">
                      <el-icon><Iphone /></el-icon>
                      <div class="content">
                        <span class="label">联系方式: </span>
                        <span class="value">{{ shopData.contact || '暂无' }}</span>
                      </div>
                    </div>
                    <div class="info-item">
                      <el-icon><Clock /></el-icon>
                      <div class="content">
                        <span class="label">营业时间: </span>
                        <span class="value">{{ openingHours }}</span>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :xs="24" :md="10">
                  <!-- 标签区 -->
                  <div class="info-section">
                    <h2 class="info-title">
                      <el-icon style="position: relative;top:3px"><CollectionTag /></el-icon>
                      特色标签
                    </h2>
                    <div class="tags-wrapper">
                      <el-tag
                          v-for="tag in filteredTags"
                          :key="tag.id"
                          type="primary"
                          effect="dark"
                          round
                      >
                        {{ tag.label }}
                      </el-tag>
                      <span v-if="!filteredTags.length" class="no-tags">暂无标签</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <!-- 统计信息卡片 -->
        <el-col :xs="24" :md="10">
          <!-- 描述卡片 -->
          <el-card class="description-card">
            <h3 class="info-title">
              <el-icon style="position: relative;top: 3px"><Notebook /></el-icon>
              店家描述
            </h3>
            <div class="description-content">
              {{ shopData.description || '暂无详细描述' }}
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 房间列表区 -->
    <div class="room-list-section">
      <h2 class="section-title">
        <el-icon style="position: relative;top: 5px"><OfficeBuilding /></el-icon>
        可选房间
      </h2>
      <room-list :rooms="rooms" :tags="allTags" @book="handleBook"/>
    </div>
  </div>
</template>